<template>
  <div class="bg-white h-69.5vh">
    <div class="container mx-auto">
      <!-- 头部标题和订单号等 -->
      <div
        class="flex justify-between items-center mb-6 w-100% pt-3 pb-3"
        style="border-bottom: 1px solid #ccc">
        <h1 class="text-xl font-bold text-red-600">振涛 收银台</h1>
        <div class="text-sm text-gray-500">
          订单号：{{ id }}<span class="text-gray-700">支付帮助</span>
        </div>
      </div>
      <div
        class="w-full max-w-md bg-white rounded-lg shadow-md p-6 mx-auto mt-20">
        <!-- 订单提交成功提示 -->
        <div class="text-center mb-6">
          <p class="text-lg font-semibold">订单提交成功，请尽快付款！</p>
          <p class="text-xl font-bold text-red-600 mt-2">
            应付金额 {{ price }} 元
          </p>
        </div>

        <!-- 支付二维码区域 -->
        <div class="bg-gray-50 p-4 rounded-lg text-center">
          <h2 class="text-lg font-semibold mb-2">微信支付</h2>
          <!-- 这里用一个占位的div模拟二维码，实际开发中可替换为真实的二维码图片 -->
          <img
            src="/imgs/course/wechat.jpg"
            alt=""
            width="150px"
            height="150px" />
          <p class="text-red-600 mb-1">请在 570 秒内完成支付</p>
          <p class="text-sm text-gray-600">
            请使用微信扫一扫<br />扫描二维码支付
          </p>
        </div>

        <!-- 其他支付方式链接 -->
        <div class="text-center mt-4">
          <a href="#" class="text-blue-500 hover:underline text-sm"
            >选择其他支付方式</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const route = useRoute();

const price = route.query.price;
const id = route.query.id;
</script>

<style scoped></style>
